<script lang="ts" setup>
// #region 引入包, 函数和组件
import { ref } from 'vue'
import { type FormRules } from 'element-plus'
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)

// #endregion

// #region // 变量
const form = ref({
  username: '',
  password: '',
})
const rules = ref<FormRules<typeof form>>({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
})
// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数
// #endregion
</script>

<template>
  <div class="login">
    <i class="icon-bg"></i>
    <router-link class="to_regist" :to="{ name: 'regist' }">注册</router-link>
    <h3>
      <a href="javascript:void(0);"> <span>校</span>当铺 </a>
    </h3>

    <el-row justify="center" align="middle">
      <el-avatar
        shape="circle"
        :size="80"
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      />
    </el-row>

    <el-form @submit.prevent :model="form" :rules :status-icon="true">
      <el-form-item class="name" prop="username">
        <el-icon size="20"><UserFilled /></el-icon>
        <el-input v-model="form.username" placeholder="请输入手机号或用户名" />
      </el-form-item>
      <el-form-item class="password" prop="password">
        <el-icon size="20"><Lock /></el-icon>
        <el-input v-model.number="form.password" placeholder="请输入密码" />
      </el-form-item>
    </el-form>

    <el-button type="primary">登录</el-button>
  </div>
</template>

<style lang="scss" scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 80rem;
}
.icon-bg {
  z-index: -1;
  position: absolute;
  background: #829f8b;
  top: -750rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1000rem;
  height: 1000rem;
  border-radius: 50%;
}
.to_regist {
  color: #fefefe;
  border: 2rem solid #fff;
  opacity: 0.3;
  padding: 2rem 6rem;
  border-radius: 4rem;
  position: fixed;
  right: 10rem;
  top: 10rem;
  &:hover {
    opacity: 0.8;
  }
}
h3 {
  font-family: '华文琥珀';
  margin: 0 auto;
  text-align: center;
  width: 200rem;
  height: 80rem;
  line-height: 80rem;
  font-size: 40rem;
  margin-bottom: 100rem;
  a {
    color: #fff;
  }
  span {
    font-size: 60rem;
  }
}
.el-form {
  padding: 30rem;
}
.search {
  width: 10rem;
}
.password,
.name {
  :deep(.el-form-item__content) {
    flex-wrap: nowrap;
  }
  .el-icon {
    margin-right: 10rem;
  }
}
.el-button {
  width: 200rem;
  display: block;
  margin: 0 auto;
}
</style>
